<template>
  <div class="container">
    <p class="area">福建省</p>
  </div>
</template>

<script>
export default {
	name: "HelloWorld",
};
import * as THREE from "three";
import mapJson from '../assets/geoJson/china.json'
import * as d3Geo from 'd3-geo';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
console.log(mapJson)
const width = window.innerWidth,
	height = window.innerHeight;

// 相机
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
camera.position.z = 800;

// 场景
const scene = new THREE.Scene();
// const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
// const material = new THREE.MeshNormalMaterial();
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);


// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animate);
renderer.setClearColor('#f2f2f2');
document.body.appendChild(renderer.domElement);

let activeIntersects = [];
function animate(time) {
	renderer.render(scene, camera);
}

new OrbitControls(camera, renderer.domElement)

function creatColor() {
  // 生成一个随机的 6 位十六进制数
  const randomHex = Math.floor(Math.random() * 16777215).toString(16);
  // 确保生成的十六进制数长度为 6，不足时在前面补 0
  return `#${randomHex.padStart(6, '0')}`;
}
const position = d3Geo.geoMercator().center([116.405285, 39.904989]).scale(500).translate([0, 0]);
// renderMapChildren(mapJson.features[0].geometry.coordinates[0][0]);
// renderMapChildren(mapJson.features[1].geometry.coordinates[0][0]);
// renderMapChildren(mapJson.features[2].geometry.coordinates[0][0]);
mapJson.features.forEach(value =>{
  // if(value.geometry.type == 'Polygon'){
  //   renderMapChildren(value.geometry.coordinates[0], '#d13a34');
  // }else{
  //   renderMapChildren(value.geometry.coordinates[0][0], '#d13a34');
  // }
  if(value.geometry.type == 'MultiPolygon'){
    value.geometry.coordinates.forEach((v)=>{
      v.forEach((c) => {
        renderMapChildren(c, "#d13a34", value.properties)
      })
    })
  }
  if(value.geometry.type == 'Polygon'){
    value.geometry.coordinates.forEach((v)=>{
        renderMapChildren(v, "#d13a34", value.properties)
    })
  }
})
function renderMapChildren(data, color, properties){
  // console.log(data)
  const provice = new THREE.Object3D();
  const point = []
  const linePoint = []

  data.forEach(value => {
    const [x, y] = position(value);
    point.push(new THREE.Vector2(x, -y))
    linePoint.push(new THREE.Vector3( x, -y, 6 ))
  });

  const extrudeSettings = {
    steps: 2,
    depth: 16,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1
  };
  const heartShape = new THREE.Shape(point, extrudeSettings);
  const geometry = new THREE.ExtrudeGeometry( heartShape );
  // geometry.center();
  // geometry.scale(50, 50, 50);
  const material = new THREE.MeshBasicMaterial({
    color: color,
    opacity: '0.6',
    transparent: true,
  });
  const mesh = new THREE.Mesh( geometry, material );
  provice.add(mesh);

  const lineMaterial = new THREE.LineBasicMaterial({
    color: '#ffffff'
  });
  const lineGeometry = new THREE.BufferGeometry().setFromPoints( linePoint );
  const line = new THREE.Line( lineGeometry, lineMaterial );
  provice.add( line );
  provice.properties = properties;
  scene.add(provice);
}

// 鼠标移过
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onPointerMove( event ) {
  const info = document.querySelector('.container');
  const infoText = document.querySelector('.area');
	// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;


   // 通过摄像机和鼠标位置更新射线
	raycaster.setFromCamera( pointer, camera );
	// 计算物体和射线的焦点
  if(activeIntersects.length){
    for ( let i = 0; i < activeIntersects.length; i ++ ) {
      activeIntersects[ i ].object.material.color.set( '#d13a34' );
    }
  }
	const intersects = raycaster.intersectObjects( scene.children );
  if(intersects.length && intersects[0].object.parent.properties){
    infoText.innerHTML = intersects[0].object.parent.properties.name;
    info.style.left = event.clientX + 'px';
    info.style.top = event.clientY + 'px';
    info.style.display = 'flex';
  }else{
    info.style.display = 'none';
  }
  
  activeIntersects = [];
	for ( let i = 0; i < intersects.length; i ++ ) {
    if(intersects[ i ].object.type === 'Mesh'){
      activeIntersects.push(intersects[ i ])
      intersects[ i ].object.material.color.set( 0xff0000 );
    }
	}
}


window.addEventListener( 'pointermove', onPointerMove );
const axesHelper = new THREE.AxesHelper( 150 );
scene.add( axesHelper );
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 80px;
  padding: 0 10px;
  height: 34px;
  background-color: #000;
  display: none;
  justify-content: center;
  align-items: center;
}
.area{
  font-size: 16px;
  color: #fff;
}
</style>
